<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link href="../../css/base.css" rel="stylesheet">
    <link href="../../css/element.css" rel="stylesheet">
</head>
<body style="background:url('../../images/bg1.jpg') no-repeat; background-size: cover;">
<div id="wrapper">
    <div style="width: 500px; margin: 150px auto;background-color:rgba(100,149,237,0.5); border-radius: 10px">
        <div style="width: 100%; height: 100px; color: darkblue; font-size: 30px;line-height: 100px; text-align: center">
            欢迎注册
        </div>
        <div style="margin-top: 25px; width: 100%; height: 350px; text-align: center">
            <input placeholder="请输入账号" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%"
                   type="text" v-model="user.username">
            <input placeholder="请输入密码" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%; margin-top: 20px"
                   type="password"
                   v-model="user.password">
            <input placeholder="请输入邮箱" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%;  margin-top: 20px"
                   type="text"
                   v-model="user.email">
            <input placeholder="请输入电话" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%;  margin-top: 20px"
                   type="text"
                   v-model="user.phone">
            <button @click="register"
                    style="height: 40px; padding: 10px; width: 60%; margin-top: 25px; background-color: steelblue; color: white">
                注册
            </button>
            <div style="margin-top: 25px">
                <a href="login.html" style="width: 60%; text-align: right; display: inline-block; color: darkblue">已有账号，去登录</a>
            </div>
        </div>
    </div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>

<script>
    new Vue({
        el: "#wrapper",
        data: {
            user: {}
        },
        methods: {
            register() {
                if (!this.user.username) {
                    this.$message({
                        message: "请输入用户名",
                        type: "error"
                    });
                    return;
                }
                if (!this.user.password) {
                    this.$message({
                        message: "请输入密码",
                        type: "error"
                    });
                    return;
                }
                $.ajax({
                    url: "/user/register",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(this.user)
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "注册成功",
                            type: "success"
                        });
                        sessionStorage.setItem("user", JSON.stringify(res.data));
                        setTimeout(() => {
                            location.href = "/index.html"
                        }, 1000)
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
    })
</script>
</body>
</html>
